<template>
<div class="bindSuccess">
  <div class="title">设备绑定</div>
  <div class="line">
    <div class="name">设备名称</div>
    <div class="value">
      <input type="text" v-model="deviceName">
    </div>
  </div>
  <div class="line">
    <div class="name">模组编号</div>
    <div class="value">
      <input type="text" v-model="lockNumber" readonly="readonly">
      <div class="iconfont" v-if="lockNumber==''" @click="beginScanLock">
          <img src="../assets/scan.png" alt="">
      </div>
      <div class="font" v-if="lockNumber!=''" @click="unBindeDevice('lock')">解绑</div>
    </div>
  </div>
  <div class="line">
    <div class="name">摄像头编号</div>
    <div class="value">
      <input type="text" v-model="cameraNumber" readonly="readonly">
      <div class="iconfont" v-if="cameraNumber==''" @click="beginScanCamera">
          <img src="../assets/scan.png" alt="">
      </div>
      <div class="font" v-if="cameraNumber!=''" @click="unBindeDevice('camera')">解绑</div>
    </div>
  </div>
  <div v-transfer-dom>
    <confirm v-model="unLockBindFlag" :title="'解绑智能锁'" @on-confirm="doUnLockBind">
      <div slot="default" class="bindSuccess-tip">
        <p>请输入6位数字密码</p>
        <input type="text" v-model="password">
      </div>

    </confirm>
  </div>
  <div v-transfer-dom>
    <confirm v-model="UnCameraBind" :title="'解绑摄像头'" @on-confirm="doUnCameraBind">
    </confirm>
  </div>
</div>
</template>
<script>
import "../iconfont/iconfont.css";
import { Confirm, TransferDomDirective as TransferDom } from "vux";
export default {
  data: function() {
    return {
      lockNumber: "",
      cameraNumber: "",
      unLockBindFlag: false,
      UnCameraBind: false,
      password: "",
      deviceName: ""
    };
  },
  directives: {
    TransferDom
  },
  components: {
    Confirm
  },
  mounted: function() {
    this.getMyDevice();
  },
  methods: {
    getMyDevice: function() {
      this.$http
        .get("http://iot.malanco.com/myDevice", {
          headers: {
            contentType: "application/json; charset=utf-8"
          },
          responseType: "json"
        })
        .then(response => {
          if (response.data.success == "true") {
            var device = response.data.data;
            if (device != null) {
              // 摄像头
              if (device.cameraId != null && device.cameraId != "") {
                this.cameraNumber = device.cameraId;
              } else {
                this.cameraNumber = "";
              }
              // 智能锁
              if (device.name != null && device.name != "") {
                this.deviceName = device.name;
              }
              if (device.deviceId != null && device.deviceId != "") {
                this.lockNumber = device.deviceId;
              } else {
                this.$vux.alert.show({
                  title: "尚未绑定智能锁",
                  content: "跳转到设备绑定界面",
                  onHide: () => {
                    this.$router.push({
                      path: "/main/bind"
                    });
                  }
                });
              }
            } else {
              this.$vux.alert.show({
                title: "尚未绑定智能锁",
                content: "跳转到设备绑定界面",
                onHide: () => {
                  this.$router.push({
                    path: "/main/bind"
                  });
                }
              });
            }
          }
        });
    },
    beginScanCamera: function() {
      // 摄像头扫码
      var that = this;
      this.$wechat.ready(function() {
        that.$wechat.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果。
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有。
          success: function(res) {
            var result = res.resultStr;
            var dianxinCameraIndex = result.indexOf("|");
            var wulianCameraIndex = result.indexOf("cmic"); // 物联的摄像头编号是cmic打头
            if (dianxinCameraIndex > 0) {
              var result = result.substr(0, dianxinCameraIndex); // 当needResult 为 1 时，扫码返回的结果。
              that.cameraNumber = result;
            } else if (wulianCameraIndex > -1) {
              var result = result.substr(4);
              that.cameraNumber = result;
            } else {
              that.$vux.toast.show({
                text: "编号格式错误"
              });
            }
          }
        });
      });
    },
    beginScanLock: function() {
      // 智能锁扫码
      var that = this;
      this.$wechat.ready(function() {
        that.$wechat.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果。
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有。
          success: function(res) {
            try {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果。
              var lockId = result.split(";")[2].split(":")[1];
              that.lockNumber = lockId;
            } catch (exception) {
              that.$vux.toast.show({
                text: "编号格式错误"
              });
            }
          }
        });
      });
    },
    unBindeDevice: function(type) {
      // 解绑智能锁/摄像头
      if (type == "lock") {
        this.unLockBindFlag = true;
      } else if (type == "camera") {
        this.UnCameraBind = true;
      }
    },
    doUnLockBind() {
      //解绑智能锁
      var data = {
        deviceId: this.lockNumber,
        password: this.password
      };
      this.$http({
        url: "http://iot.malanco.com/unBindLock", 
        data: JSON.stringify(data),
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8"
        }
      }).then(
        response => {
          if (response.data.success == "true") {
            this.$vux.toast.show({
              text: "设备解绑成功"
            });
            setTimeout(() => {
              this.$router.push("/main/bind");
            }, 1000);
          }
        },
        response => {
          var message = response.response.data.exceptionObj.message;
          this.$vux.toast.show({
            type: "warn",
            text: message
          });
          this.password = "";
        }
      );
    },
    doUnCameraBind() {
      // 解绑摄像头
      var data = {
        cameraId: this.cameraNumber
      };
      this.$http
        .post("http://iot.malanco.com/unBindCamera", {
          headers: {
            contentType: "application/json; charset=utf-8"
          },
          params: JSON.stringify(data),
          responseType: "json"
        })
        .then(response => {
          if (response.data.success == "true") {
            this.$vux.toast.show({
              text: "设备解绑成功"
            });
            setTimeout(() => {
              this.$router.push("/main/bind");
            }, 1000);
            this.cameraNumber = "";
          }
        });
    }
  }
};
</script>
<style lang="less">
.bindSuccess {
  margin: 0 10px;
  .title {
    text-align: center;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
  }
  .line {
    display: flex;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    align-items: center;
    position: relative;
    .name {
      width: 75px;
      height: 30px;
    }
    .value {
      flex-grow: 1;
      input {
        border: none;
        outline: none;
        width: 113px;
        margin-right: 28px;
        padding-left: 10px;
      }
      .iconfont {
        position: absolute;
        right: 0;
        top: 0;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #e1f0f6;
        padding-left: 5px;
        img {
          width: 15px;
          margin-top: 8px;
        }
      }
      .font {
        position: absolute;
        right: 0;
        top: 0;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #e1f0f6;
        padding-left: 5px;
        font-size: 12px;
        color: #ccc;
      }

      border-bottom: 1px solid #e1f0f6;
    }
  }
}
.bindSuccess-tip p {
  color: #ccc;
}
</style>
